<template>
  <div id="addMenu">
    <Card style="width: 70%">
      <p slot="title">菜单信息</p>
      <Form
        ref="formValidate"
        :model="menuInfo"
        :rules="ruleValidate"
        :label-width="120"
      >
        <formItem label="上级菜单" prop="titleTop">
          <Input
            v-model="menuInfo.titleTop"
            placeholder="上级菜单"
            disabled
          ></Input>
        </formItem>
        <formItem label="菜单名称" prop="title">
          <Input v-model="menuInfo.title" placeholder="权限名称"></Input>
        </formItem>
        <formItem label="路由名称" prop="name">
          <Input v-model="menuInfo.name" placeholder="路由名称"></Input>
        </formItem>
        <formItem label="是否菜单隐藏">
          <radioGroup v-model="menuInfo.type" @on-change="radioChange()">
            <Radio label="1">菜单权限</Radio>
            <Radio label="2">按钮显示</Radio>
            <Radio label="3">访问控制</Radio>
          </radioGroup>
        </formItem>
        <formItem label="是否关闭">
          <i-switch v-model="menuInfo.is_del" size="large">
            <span slot="open">显示</span>
            <span slot="close">关闭</span>
          </i-switch>
        </formItem>
        <formItem label="组件地址" prop="component">
          <Input v-model="menuInfo.component" placeholder="组件地址"></Input>
        </formItem>
        <formItem
          ref="inpnt"
          label="菜单icon"
          prop="icon"
          v-if="menuInfo.type == 1"
        >
          <Input readonly v-model="menuInfo.icon" placeholder="菜单icon">
          </Input>
          <div :class="['Tab_Control', { Tab: fage }]">
            <main>
              <i
                v-for="value in iconlist.glyphs"
                :key="value.icon_id"
                @click.stop="icon(value.font_class)"
                :class="['iconfont', 'icon-' + value.font_class]"
              ></i>
            </main>
          </div>
        </formItem>
        <formItem label="菜单排序" prop="sort" v-if="menuInfo.type == 1">
          <Input v-model="menuInfo.sort" placeholder="菜单排序"></Input>
        </formItem>

        <!--            <formItem label="是否菜单隐藏">-->
        <!--                <i-switch v-model="menuInfo.hideInMenu" size="large">-->
        <!--                    <span slot="open">显示</span>-->
        <!--                    <span slot="close">隐藏</span>-->
        <!--                </i-switch>-->
        <!--            </formItem>-->
        <!--            <formItem label="面包屑隐藏">-->
        <!--                <i-switch v-model="menuInfo.hideInBread" size="large">-->
        <!--                    <span slot="open">显示</span>-->
        <!--                    <span slot="close">隐藏</span>-->
        <!--                </i-switch>-->
        <!--            </formItem>-->

        <formItem>
          <Button type="primary" @click="toEdit">提交</Button>
          <Button style="margin-left: 8px" @click="backUrl">返回</Button>
        </formItem>
      </Form>
    </Card>
  </div>
</template>

<script>
import iconlist from "@/assets/MenuIcon/font/iconfont.json";
import "@/assets/MenuIcon/font/iconfont.css";
export default {
  data() {
    return {
      id: "",
      pid: "",
      iconlist,
      fage: false,
      menuInfo: {
        id: 0,
        pid: 0,
        titleTop: "顶级菜单",
        title: "",
        is_hide_menu: 0,
        is_hide_bread: 0,
        is_del: true,
        icon: "",
        type: "1",
        sort: 0,
      },
      ruleValidate: {},
    };
  },
  methods: {
    // 获取菜单列表
    getMenuInfo(id, type) {
      this.$axios("/admin/menu/getMenuInfo", { id: id }).then((result) => {
        if (type == "id") {
          this.menuInfo = result;
          this.menuInfo.is_del = this.menuInfo.is_del == 1 ? false : true;
          this.menuInfo.type = this.menuInfo.type + "";
        } else {
          if (result) {
            this.menuInfo.pid = result.id;
            this.menuInfo.titleTop = result.title;
          }
        }
      });
    },
    radioChange() {
      if (this.menuInfo.type === 1) {
        return;
      }
      this.menuInfo.is_hide_menu = 1;
      this.menuInfo.is_hide_bread = 1;
      this.menuInfo.icon = "md-alert";
      this.menuInfo.sort = 9999;
    },
    // 添加，修改菜单
    toEdit() {
      let data = {
        id: this.menuInfo.id,
        pid: this.menuInfo.pid,
        is_hide_menu: this.menuInfo.is_hide_menu,
        is_hide_bread: this.menuInfo.is_hide_bread,
        is_del: this.menuInfo.is_del ? 0 : 1,
        title: this.menuInfo.title,
        name: this.menuInfo.name,
        path: "/" + this.menuInfo.name,
        component: this.menuInfo.component,
        icon: this.menuInfo.icon,
        sort: this.menuInfo.sort,
        type: this.menuInfo.type,
      };
      this.$axios("/admin/menu/saveMenuInfo", data).then((result) => {
        this.$Message.success("更新成功");
        //执行返回
        this.$router.go(-1);
      });
    },
    backUrl() {
      this.$router.go(-1);
    },
    // 选择icon图标
    icon(icon) {
      this.fage = false;
      this.menuInfo.icon = icon;
    },
    // 开启关闭弹窗
    shows() {
      this.fage = !this.fage;
    },
  },
  created() {
    this.menuInfo.id = this.$route.params.id;
    this.menuInfo.pid = this.$route.params.pid;

    if (
      this.menuInfo.id &&
      this.menuInfo.id != undefined &&
      this.menuInfo.id != 0
    ) {
      // 有id修改的
      this.getMenuInfo(this.menuInfo.id, "id");
    }
    if (
      this.menuInfo.pid &&
      this.menuInfo.pid != "undefined" &&
      this.menuInfo.pid != 0
    ) {
      // 有pid说明要查询pid信息
      this.getMenuInfo(this.menuInfo.pid, "pid");
    } else {
      this.menuInfo.pid = 0;
      this.menuInfo.titleTop = "顶级菜单";
    }
  },
  mounted() {
    this.$refs.inpnt.$el.onclick = this.shows;
  },
};
</script>

<style lang="less">
#addMenu {
  & > [class="ivu-card ivu-card-bordered"] {
    & > [class="ivu-card-body"] {
      & > form {
        & > [class="ivu-form-item"]:nth-child(7) {
          position: relative;
          .Tab {
            box-shadow: 0px 0px 6px 1px #00000060 !important;
            height: 120px !important;
          }
          .Tab_Control {
            background: #fff;
            box-shadow: 0px 0px 6px 1px #00000000;
            width: 100%;
            height: 0px;
            overflow: hidden;
            position: absolute;
            bottom: 97%;
            left: 0;
            transition: all 0.3s;
            & > main {
              height: 120px;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              overflow: auto;
              & > i:hover {
                background-color: #f3f3f3;
              }
              & > i {
                width: 43px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 17px;
                color: #333;
              }
            }
          }
        }
      }
    }
  }
}
</style>
